<template>
    <div class="wrapper">
        <div class="header">
            <div>
                商家列表
                <input type="text" placeholder="种类" v-model="orderTypeId">
                <button @click="updatePwd">确认</button>
            </div>
            <div>

            </div>
        </div>
        <div class="business">
                <div v-for="business in Businesses" key="business.businessId" class="businessItem" @click="handleClick(5)">
                    <div class="businessImage">
                        <img :src="business.businessImg"/>
                        <div class="businessImageQuantity">3</div>
                    </div>
                    <div class="businessInfo">
                        <h3>{{ business.businessName }}</h3>
                        <p>￥{{business.starPrice}}起送|￥{{business.deliveryPrice}}配送</p>
                        <p>{{ business.businessExplain }}</p>
                    </div>
                </div>
        </div>
<!--        <div class="business">
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj01.png"/>
                    <div class="businessImageQuantity">3</div>
                </div>
                <div class="businessInfo">
                    <h3>万家饺子（软件园E18店）</h3>
                    <p>￥15起送|￥3配送</p>
                    <p>各种饺子炒菜</p>
                </div>
            </div>
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj03.png"/>
                    <div class="businessImageQuantity">2</div>
                </div>
                <div class="businessInfo" >
                    <h3>麦当劳炸鸡店（全运路店）</h3>
                    <p>￥15起送|￥3配送</p>
                    <p>汉堡薯条</p>
                </div>
            </div>
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj02.png"/>
                    <div class="businessImageQuantity">1</div>
                </div>
                <div class="businessInfo">
                    <h3>小锅饭豆腐（一二一大街店）</h3>
                    <p>￥15起送|￥3配送</p>
                    <p>特色美食</p>
                </div>
            </div>
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj04.png"/>
                    <div class="businessImageQuantity" style="display: none">3</div>
                </div>
                <div class="businessInfo">
                    <h3>米村拌饭（官南大道店）</h3>
                    <p>￥25起送 | ￥3配送</p>
                    <p>各种炒菜拌饭</p>
                </div>
            </div>
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj05.png"/>
                    <div  class="businessImageQuantity" style="display: none">3</div>
                </div>
                <div class="businessInfo">
                    <h3>申记串道（金碧广场店）</h3>
                    <p>￥15起送 | ￥3配送</p>
                    <p>烤串炸串</p>
                </div>
            </div>
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj07.png"/>
                    <div class="businessImageQuantity">3</div>
                </div>
                <div class="businessInfo">
                    <h3>茶兮（一二一大街店）</h3>
                    <p>￥15起送 | ￥3配送</p>
                    <p>3.2km | 30分钟</p>
                </div>
            </div>
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj08.png"/>
                    <div class="businessImageQuantity">3</div>
                </div>
                <div class="businessInfo">
                    <h3>水果捞</h3>
                    <p>￥15起送 | ￥3配送</p>
                    <p>3.2km | 30分钟</p>
                </div>
            </div>
            <div class="businessItem" onclick="Topage(3)">
                <div class="businessImage">
                    <img src="../img/sj02.png"/>
                    <div class="businessImageQuantity">3</div>
                </div>
                <div class="businessInfo">
                    <h3>小饭馆</h3>
                    <p>￥15起送 | ￥3配送</p>
                    <p>3.2km | 30分钟</p>
                </div>
            </div>
        </div>-->
        <div class="footer">
            <div @click="handleClick(1)"><i class="fa fa-home"></i><p>首页</p></div>
            <div><i class="fa fa-compass"></i><p>发现</p></div>
            <div @click="handleClick(2)"><i class="fa fa-file-text"></i><p>订单</p></div>
            <div @click="handleClick(3)"><i class="fa fa-user-o"></i><p>我的</p></div>
        </div>
    </div>

</template>

<script setup>

import {ref,inject} from "vue";
import axios from "axios";
import router from "../router/index.js";
const $http = inject("$axios");
const $queryStr=inject("$qs")
const orderTypeId=ref("");
const userId=ref("");
const userPwd=ref("");
const userNewPwd=ref("");
const resInf=ref("");
const businessId=ref()
const Businesses=ref([])
const Businesses2=ref([])
const Token=ref("")
function handleClick(Num){
    this.Token=JSON.parse(window.localStorage.getItem('access-admin'))
    $http.post(`/api/elm_api/BusinessController/listBusinessByOrderTypeId`,
        $queryStr.stringify({
            orderTypeId:orderTypeId.value
        })
    )
        .then(res=>{
            Businesses.value = res.data
        });
    //路由负责跳转
        if (Num===1)router.push('/Index')
        if(Num===2)router.push('/OrderList')
        if(Num===3)router.push('/Login')
        if(Num===5)router.push('/BusinessNew')

}

function updatePwd(){
    //通过参数orderTypeId请求数据
    $http.post(`/api/elm_api/BusinessController/listBusinessByOrderTypeId`,
        $queryStr.stringify({
            orderTypeId:orderTypeId.value
        })
    )
        .then(res=>{
            Businesses.value = res.data
        });
}

</script>

<style scoped lang="css">
@import "../../src/css/global.css";
@import "../../src/css/font-awesome/css/font-awesome.min.css";
@import "../../src/css/businessList.css";
@import "../../src/css/normalize.css";
</style>